<template>
    <div class="appointment-setting box full">
        <breadcrumb :title="'规则设置'" :noBack="true"></breadcrumb>
        <div class="setting mt20">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="form" :show-message="false">
                <el-form-item prop="count">
                    1个患者可以有
                    <el-input-number v-model="ruleForm.count" :min="0" :max="10000" size="medium" :controls="false"
                                     class="short"></el-input-number>
                    个陪护人员
                </el-form-item>
                <div class="tips">注：此处设置不影响患者单独设置的陪护人数</div>
                <el-form-item prop="startTime" class="line">
                    探视开始时间
                    <el-time-picker
                        size="medium"
                        v-model="ruleForm.startTime"
                        :picker-options="{
                            format: 'HH:mm'
                        }"
                        value-format="HH:mm"
                        format="HH:mm"
                        placeholder="">
                    </el-time-picker>
                </el-form-item>
                <el-form-item prop="leaveTime" class="line">
                    探视结束时间
                    <el-time-picker
                        size="medium"
                        v-model="ruleForm.leaveTime"
                        :picker-options="{
                            format: 'HH:mm'
                        }"
                        value-format="HH:mm"
                        format="HH:mm"
                        placeholder="">
                    </el-time-picker>
                </el-form-item>
                <el-form-item prop="stayTime" class="line">
                    逗留时间
                    <el-select v-model="ruleForm.stayTime" class="select" size="medium">
                        <el-option
                            v-for="item in stayTimeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    分钟
                </el-form-item>
                <el-form-item prop="expirationTime">
                    临时卡失效时间
                    <el-time-picker
                        size="medium"
                        v-model="ruleForm.expirationTime"
                        :picker-options="{
                            format: 'HH:mm'
                        }"
                        value-format="HH:mm"
                        format="HH:mm"
                        placeholder="">
                    </el-time-picker>
                </el-form-item>
            </el-form>
        </div>
        <div class="buttons">
            <el-button type="primary" class="submit" @click="submit">保存</el-button>
        </div>
    </div>
</template>

<script>
    import breadcrumb from '../components/breadcrumb'

    export default {
        data() {
            return {
                ruleForm: {
                    count: '', // 陪护人数
                    startTime: '', // 探视开始时间
                    leaveTime: '', // 探视结束时间
                    stayTime: '', // 探视逗留时间
                    expirationTime: '' // 临时卡失效时间
                },
                rules: {
                    count: [
                        {required: true, message: '请填写陪护人数', trigger: 'blur'}
                    ],
                    startTime: [
                        {required: true, message: '请选择探视开始时间', trigger: 'change'}
                    ],
                    leaveTime: [
                        {required: true, message: '请选择探视结束时间', trigger: 'change'}
                    ],
                    expirationTime: [
                        {required: true, message: '请选择临时卡失效时间', trigger: 'change'}
                    ]
                },
                stayTimeOptions: [
                    {
                        value: '10',
                        label: '10'
                    },
                    {
                        value: '20',
                        label: '20'
                    },
                    {
                        value: '30',
                        label: '30'
                    },
                    {
                        value: '40',
                        label: '40'
                    },
                    {
                        value: '50',
                        label: '50'
                    },
                    {
                        value: '60',
                        label: '60'
                    }
                ]
            }
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                this.$http.get('/regulations/select').then(result => {
                    if (result.success) {
                        let data = result.data
                        this.ruleForm.count = data.escortAssociatedCounts
                        if (data.visitTimeLimit) {
                            this.ruleForm.startTime = data.visitTimeLimit.split(',')[0]
                            this.ruleForm.leaveTime = data.visitTimeLimit.split(',')[1]
                            this.ruleForm.stayTime = data.visitTimeLimit.split(',')[2]
                        }
                        this.ruleForm.expirationTime = data.expirationTime
                    }
                })
            },
            validate(formName, callback) {
                this.$refs[formName].validate((valid, obj) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        this.$message({
                            message: obj[Object.keys(obj)[0]][0].message,
                            type: 'warning'
                        })
                        return false
                    }
                })
            },
            submit() {
                this.validate('ruleForm', () => {
                    let limit = [this.ruleForm.startTime, this.ruleForm.leaveTime, this.ruleForm.stayTime]
                    this.$http.post('/regulations/update', {
                        escortAssociatedCounts: this.ruleForm.count,
                        expirationTime: this.ruleForm.expirationTime,
                        visitTimeLimit: limit.join(',')
                    }).then(result => {
                        if (result.success) {
                            this.$method.messageBox('alert', '规则设置修改成功')
                        }
                    })
                })
            }
        },
        components: {
            breadcrumb
        }
    }
</script>

<style scoped lang="less">
    .appointment-setting {
        padding: 15px 30px;

        /deep/ .setting {
            line-height: 32px;
            max-width: 80%;
            font-size: 14px;
            font-weight: bolder;

            /*> div {*/
            /*    margin-bottom: 40px;*/

            /*    &:last-child {*/
            /*        margin-bottom: 0;*/
            /*    }*/
            /*}*/

            .line {
                display: inline-block;
                vertical-align: top;
            }

            .el-form-item {
                margin-bottom: 40px;
            }

            .el-input-number {
                display: inline-block;
                width: 120px;
                margin: 0 6px;

                &.short {
                    width: 60px;

                    input {
                        padding: 0 5px;
                        text-align: center;
                        /*width: 60px;*/
                    }
                }
            }

            .el-date-editor, .el-select {
                width: 100px;
                margin: 0 6px;
            }

        }

        .buttons {
            margin-top: 60px;

            .el-button {
                width: 180px;
                padding: 16px 20px;
            }
        }

        .tips {
            color: #FF7D7D;
            margin-bottom: 20px;
            margin-top: -30px;
        }
    }
</style>
